<template>
    <div>
        <section class="rating-container">
            <section class="rating-overview">
                <div class="overview-col-1">
                    <strong>4.6</strong>
                    <p>综合评价</p>
                    <p>高于周边商家66.2%</p>
                </div>
                <div class="overview-col-2">
                    <div class="overview-line">
                        <div class="title">服务态度</div>
                        <div class="content">
                            <div class="rating-wrap">
    
                            </div>
                            <span class="score">4.7</span>
                        </div>
                    </div>
                    <div class="overview-line">
                        <div class="title">菜品评价</div>
                        <div class="content">
                            <div class="rating-wrap">
    
                            </div>
                            <span class="score">4.7</span>
                        </div>
                    </div>
                    <div class="overview-line">
                        <div class="title">送达时间</div>
                        <div class="content small">
                            39分钟
                        </div>
                    </div>
                </div>
            </section>
            <section class="rating-list">
                <div class="rating-tag">
                    <div class="rating-tag-item active">
                        全部(487)
                    </div>
                    <div class="rating-tag-item">
                        满意(472)
                    </div>
                    <div class="rating-tag-item">
                        不满意(15)
                    </div>
                    <div class="rating-tag-item">
                        有图(1)
                    </div>
                </div>
                <ul class="scroll-distance">
                    <li class="comment">
                        <div class="face">
                            <img src="" alt="">
                        </div>
                        <div class="comment-container">
                            <header class="comment-head">
                                <div class="head-box">
                                    <h3>3*******e</h3>
                                    <div class="rating-wrap">
    
                                    </div>
                                    <span>按时送达</span>
                                </div>
                                <div class="head-time">
                                    <time></time>
                                </div>
                            </header>
                            <div class="comment-reply">
                                商家回复：谢谢您的支持！祝您心情愉快！
                            </div>
                            <ul class="food-ul">
                                <li>
                                    <img src="" alt="">
                                </li>
                                <li>
                                    <img src="" alt="">
                                </li>
                            </ul>
                            <ul class="food-block">
                                <li>鲜羊肉筋（5串一份）</li>
                                <li>蜜汁烤翅</li>
                            </ul>
                        </div>
                    </li>
                    <li class="comment"></li>
                </ul>
            </section>
        </section>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                q: 0,
                c: null,
            }
        },
        mounted() {
            // 评分
            // this.$fetch('GET', '/ugc/v2/restaurants/2156031/ratings/scores', {
            // }).then(res => {
            //     // console.log(res)
            // });

            // this.$fetch('GET', '/ugc/v2/restaurants/2156031/ratings/tags', {
            // }).then(res => {
            //     // console.log(res)
            // });

            // this.$fetch('GET', '/ugc/v2/restaurants/2156031/ratings', {
            //     'has_content':true,
            //     'offset':0,
            //     'limit':10
            // }).then(res => {
            //     // console.log(res)
            // });
        },
        beforeDestroy() {
    
        }
    }  
</script>

<style lang="stylus" scoped>
    .rating-container
        heigit:100%;
    .rating-overview
        background-color: #fff;
        margin-bottom: .266667rem;
        padding: .4rem;
        font-size: .36rem;
        display: flex;
        align-items: center;
        color: #666;
        .overview-col-1
            padding-right: .4rem;
            border-right: 1px solid #ddd;
            text-align: center;
            line-height: 1.5;
            strong
                font-size: .8rem;
                line-height: 1;
                font-weight: 400;
                color: #f60;
                display: block;
            p
                &:last-child
                    font-size: .26rem;
                    color: #999;
        .overview-col-2
            flex:1;
            width: 0;
            font-size: .373333rem;
            line-height: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            .overview-line
                width: 80%;
                margin: .133333rem 0;
                display:flex;
                align-items:center
                display:flex;
                .content
                    flex:1;
                    display:flex;
                    align-items:center
                    padding-left: .26rem;
                    .rating-wrap
                        position: relative;
                        overflow: hidden;
                        display: inline-block;
                        vertical-align: middle;
                    .score
                        color: #f60;
                        padding-left: .266667rem;
                .small
                    font-size: .26rem;
                    color: #999;

    .rating-list
        background-color: #fff;
        padding: .4rem .32rem;
        font-size: .36rem;
    .rating-tag
        padding-bottom: .4rem;
        border-bottom: 1px solid #ddd;
        .rating-tag-item
            display: inline-block;
            padding: .2rem;
            margin: .066667rem .133333rem;
            border-radius: .133333rem;
            color: #6d7885;
            background-color: #ebf5ff;
            &.active
                color: #fff;
                background-color: #3190e8;


    .scroll-distance
        .comment
            padding: .4rem 0;
            border-bottom: 1px solid #ddd;
            display:flex;
            .face
                width: 1.2rem;
                // height: .8rem;
                // border-radius: 50%;
            .comment-container
                position: relative;
                .comment-head
                    display:flex;
                .comment-reply
                    position: relative;
                    margin: .26rem 0;
                    padding: .26rem;
                    background: #f3f3f3;
                    border-radius: .106667rem;
                .food-ul
                    li 
                        display: inline-block;
                        margin: .13rem;
                        img 
                            width: 1.9rem;
                            height: 1.9rem;
                .food-block
                    li
                        display: inline-block;
                        font-size: .293333rem;
                        color: #999;
                        border: 1px solid #ddd;
                        padding: .106667rem .266667rem;
                        margin: .093333rem;
                        border-radius: .08rem;
                        max-width: 1.6rem;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
</style>